<template>
    <div>
        <p>分类1</p>
        <p @click="addNum(5)">num:{{ num }}</p>
        <ul>
            <li v-for="item in schoolList.schoollist" :key="item.id">{{ item.school_name }}</li>
        </ul>
        <hr />
        <ul>
            <li v-for="item in filterSchoollist" :key="item.id">{{ item.school_name }}</li>
        </ul>
    </div>
</template>

<script setup>
// 导入仓库方法
import { useShopStore } from '@/store/shopstore.js';
import { storeToRefs } from 'pinia'
const shopStore = useShopStore()
console.log('shopStore', shopStore);
// 使用对象结构的方法解构shopStore对象
// 注意: 如果解构该  store 仓库对象时, 会导致该store 上的数据丢失响应性, 需要使用
// storeToRefs 方法处理该对象, 使该对象上每一个属性都有响应式
const { num, schoolList, filterSchoollist } = storeToRefs(shopStore)

// console.log(num);
// 注意: 方法时不需要响应式的, 所以可以直接解构
const { addNum, initSchollListFn } = shopStore
//初始化调用
initSchollListFn()



</script>
<style scoped></style>